<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML lang="ja-JP">
<HEAD>
 <TITLE>image test</TITLE>
	<META http-equiv="X-UA-Compatible" content="IE=8">
	<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<META http-equiv="Content-Script-Type" content="text/javascript">
	<BASE href="http://kiyoto777.web.fc2.com/test/">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function() { // HTMLが読み込まれるまで待つ ( $(document).ready )
var setImg = '#test';
var fadeSpeed = 2000;
var switchDelay = 2000;

$(setImg).children('img').css({opacity:'0'});
$(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed);

setInterval(function(){
$(setImg + ' :first-child')
.animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg);
},switchDelay);
});
</script>
<style type="text/css">
#test{
height:100px;
width:100px;
background-image: url(gaz0.gif);
overflow:hidden;
}
</style>
</head>
<body>
<div id="test">
<img src="gaz1.gif">
<img src="gaz2.gif">
<img src="gaz3.gif">
<img src="gaz4.gif">
<img src="gaz5.gif">
</div>
</BODY>
</HTML>

